<template>
  <div class="weui-panel item">
    <div class="weui-panel__hd">
      <p>房租订单</p>
      <span v-bind:class="statusClass">{{ rentPayMonth }}{{ status }}</span>
    </div>
    <div class="weui-panel__bd">

      <div class="weui-media-box weui-media-box_small-appmsg">
        <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__hd">租期</div>
            <div class="weui-cell__bd weui-cell_primary text-right">
              <p>{{rentStartTime | formatDate}}至{{rentEndTime | formatDate}}</p>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">月租金</div>
            <div class="weui-cell__bd weui-cell_primary text-right">
              <p>{{monthRent}}元/月</p>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">交租日</div>
            <div class="weui-cell__bd weui-cell_primary text-right">
              <p>{{rentDay}}号</p>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">交租方式</div>
            <div class="weui-cell__bd weui-cell_primary text-right">
              <p>{{rentType}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'orderItem',
    props: {
      status: {
        type: String
      },
      rentPayMonth: {
        type: String
      },
      monthRent: {
        type: Number,
        default: 0,
        required: true
      },
      rentDay: {
        type: Number,
        default: 1,
        required: true
      },
      rentType: {
        type: String,
        default: '月付',
        required: true
      },
      rentStartTime: {
        type: String,
        default: 'YYYY/MM/DD',
        required: true
      },
      rentEndTime: {
        type: String,
        default: 'YYYY/MM/DD',
        required: true
      }
    },
    computed: {
      statusClass() {
        const status = this.status
        let statusClass = ''
        if (status === '处理中') {
          statusClass = 'status-todo'
        } else if (status === '支付成功') {
          statusClass = 'status-done'
        }
        return statusClass
      }
    },
    filters: {
      formatDate(value) {
        if (!value) return ''
        return value.replace(/-/g, '/')
      }
    }
  }
</script>

<style lang="less" scoped>
  .weui-panel__hd {
    font-size: 16px;
    line-height: 16px;
    color: #808080;
    padding: 15px;
    display: flex;
    align-items: center;
    p {
      flex: 1;
      padding-left: 18px;
      background: url(../assets/icon-house.png) no-repeat 0 center;
      background-size: 15px 15px;
    }
    span {
      font-size: 12px;
      &.status-todo {
        color: #ff624c;
      }
      &.status-done {
        color: #808080;
      }
    }
  }

  .text-right {
    text-align: right;
    color: #999999;
    font-size: 12px;
  }

  .weui-cell__hd {
    font-size: 14px;
  }

  .weui-cell_primary {
    font-size: 14px;
    color: #808080;
  }

  .weui-cell::before,
  .weui-cells::after,
  .weui-panel::after,
  .weui-panel::before{
    border: 0;
  }
</style>
